<template>
    <div>
        <!-- 登录状态 -->
        <van-cell-group v-if="user" class="my-info">
            <van-cell center :border="false" class="base-info">
                <van-image
                    class="avatar"
                    slot="icon"
                    width="50"
                    height="50"
                    fit="cover"
                    round
                    :src="userInfo.photo"
                />
                <div class="name" slot="title">{{ userInfo.name }}</div>
                <van-button
                    class="edit-btn"
                    size="mini"
                    round
                    to="/user/profile"
                    >编辑资料</van-button
                >
            </van-cell>
            <van-grid :border="false" class="data-info">
                <van-grid-item class="data-info-item">
                    <div slot="text" class="text-wrap">
                        <div class="count">{{ userInfo.art_count }}</div>
                        <div class="text">头条</div>
                    </div>
                </van-grid-item>
                <van-grid-item
                    class="data-info-item"
                    :to="`/user/${userInfo.id}/follow`"
                >
                    <div slot="text" class="text-wrap">
                        <div class="count">{{ userInfo.follow_count }}</div>
                        <div class="text">关注</div>
                    </div>
                </van-grid-item>
                <van-grid-item
                    class="data-info-item"
                    :to="`/user/${userInfo.id}/fans`"
                >
                    <div slot="text" class="text-wrap">
                        <div class="count">{{ userInfo.fans_count }}</div>
                        <div class="text">粉丝</div>
                    </div>
                </van-grid-item>
                <van-grid-item class="data-info-item">
                    <div slot="text" class="text-wrap">
                        <div class="count">{{ userInfo.like_count }}</div>
                        <div class="text">获赞</div>
                    </div>
                </van-grid-item>
            </van-grid>
        </van-cell-group>
        <!-- 未登录状态 -->
        <div v-else class="not-login">
            <div
                @click="
                    $router.push({
                        path: 'login',
                        query: {
                            redirect: '/my'
                        }
                    })
                "
            >
                <!-- <div @click="$router.push('/login')"> -->
                <img class="img" src="./shouhua.jpg" />
            </div>
            <div class="text">
                <span>注册 / 登录</span>
            </div>
        </div>
        <van-grid :column-num="2" class="nav-grid margin-bottom">
            <van-grid-item
                class="nav-grid-item"
                icon-prefix="iconfont"
                icon="shoucang"
                text="收藏"
                to="/my-article/collect"
            />
            <van-grid-item
                class="nav-grid-item"
                icon-prefix="iconfont"
                icon="lishi"
                text="历史"
                to="/my-article/history"
            />
        </van-grid>
        <van-cell title="消息通知" is-link to="/" />
        <van-cell
            class="margin-bottom"
            title="小智同学"
            is-link
            to="/user/chat"
        />
        <van-cell
            v-if="user"
            class="logout-btn"
            title="退出登录"
            @click="onLogout"
        />
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/user'
export default {
    data () {
        return {
            // 用户个人信息
            userInfo: {}
        }
    },
    created () {
        this.loadUserInfo()
    },
    methods: {
        // 退出登录
        onLogout () {
            this.$dialog.confirm({
                title: '退出登录',
                message: '确认退出嘛'
            })
                .then(() => {
                    // on confirm
                    // 删除 token
                    this.$store.commit('setUser', null)
                })
                .catch(() => {
                    // on cancel
                })
        },
        // 获取用户个人信息
        async loadUserInfo () {
            const { data: res } = await getUserInfo()
            // console.log(res);
            this.userInfo = res.data
        }
    },
    computed: {
        ...mapState(['user'])
    }
}
</script>

<style scoped>
.my-info {
    background-color: #439eff !important;
}
.base-info {
    background-color: unset;
    box-sizing: border-box;
    height: 115px;
    padding-top: 38px;
    padding-bottom: 11px;
}
.base-info .avatar {
    box-sizing: border-box;
    width: 66px;
    height: 66px;
    border: 1px solid #fff;
    margin-right: 11px;
}
.base-info .name {
    font-size: 15px;
    color: #fff;
}
.base-info .edit-btn {
    height: 23px;
    font-size: 10px;
    color: #666666;
}

.not-login {
    height: 180px;
    background-color: #439eff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.not-login .img {
    width: 66px;
    height: 66px;
    /* border: 1px solid #fff; */
    border-radius: 50%;
}
.not-login .text {
    font-size: 14px;
    color: #fff;
}

.data-info-item {
    height: 65px;
    color: #fff;
}
.data-info-item .text-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.text-wrap .count {
    font-size: 18px;
}
.text-wrap .text {
    font-size: 11px;
}

.nav-grid /deep/ .nav-grid-item {
    height: 80px;
    background-color: #fff;
}
.nav-grid-item /deep/ .iconfont-shoucang {
    color: #eb5253;
    font-size: 22px;
}
.nav-grid-item /deep/ .iconfont-lishi {
    color: #ff9d1d;
    font-size: 22px;
}

.logout-btn {
    text-align: center;
    color: #d86262;
}

.margin-bottom {
    margin-bottom: 4px;
}
.van-grid /deep/ .van-grid-item__content {
    background-color: unset;
}
</style>
